<template>
  <div>
    <Aside />
    <!-- cesium -->
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup name="App">
import { onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium'

import Aside from '@/components/aside/Aside.vue'
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0Y2YxYWFiOC1hMjkxLTQ3MmQtOTMzOC02ODQzNGYzZThjYmIiLCJpZCI6MTg0MTQwLCJpYXQiOjE3MDI0NDY4MDR9.Xax9xESQVAXXQgP_6OnWSj0AAvpwFh_FLQAxjdwfaZ0"
let viewer;
onMounted(() => {
  // 地球视图，底图加载
  viewer = new Cesium.Viewer('cesiumContainer', {
    //地形图层
    terrain: Cesium.Terrain.fromWorldTerrain(),
    //信息窗口
    infoBox: false,
    //显示查询按钮
    // geocoder: false,
    //home按钮
    homeButton: false,
    //控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择
    baseLayerPicker: false,
    //帮助按钮
    navigationHelpButton: false,
    //播放动画
    animation: false,
    //时间线
    timeline: false,
    //全屏模式
    fullscreenButton: false,
  });
  // viewer.extend(Cesium.viewerCesiumInspectorMixin);
  // cesium基本设置
  function cesiumDefaultModel(viewer) {
    //隐藏cesium Icon-logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';
    //帧率
    viewer.scene.debugShowFramesPerSecond = true;
    // cesium的默认视角
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);
    // 抗锯齿
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled = false;
    // 水雾特效
    viewer.scene.globe.showGroundAtmosphere = true;
    // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
    viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
    viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
    viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
    //设置缩放程度
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 30000000;
    //设置视角缩放类型
    //设置鼠标操作
    viewer.scene.screenSpaceCameraController.zoomEventTypes = [
      Cesium.CameraEventType.RIGHT_DRAG,
      Cesium.CameraEventType.WHEEL,
      Cesium.CameraEventType.PINCH,
    ];
    viewer.scene.screenSpaceCameraController.tiltEventTypes = [
      Cesium.CameraEventType.MIDDLE_DRAG,
      Cesium.CameraEventType.PINCH,
      {
        eventType: Cesium.CameraEventType.LEFT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
      },
      {
        eventType: Cesium.CameraEventType.RIGHT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
      },
    ];
    //地形夸张 拉伸地形
    // viewer.scene.globe.terrainExaggeration = 1.0;
    //添加OMS 房屋
    // viewer.scene.primitives.add(await Cesium.createOsmBuildingsAsync())
    //添加瓦片坐标信息
    // viewer.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())
    // 将三维球定位到中国
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
      orientation: {
        heading: Cesium.Math.toRadians(348.4202942851978),
        pitch: Cesium.Math.toRadians(-89.74026687972041),
        roll: Cesium.Math.toRadians(0)
      },
      complete: function callback() {
        // 定位完成之后的回调函数
      }
    });
  }
  cesiumDefaultModel(viewer); //调用方法
})
onUnmounted(() => {
  viewer.destroy();
})
</script>

<style scoped></style>